<template>
    <div class="left">
312
    </div>
    <div class="right" style="user-select: none;">
        <div style="margin-left: 50px;">
            <span :class="loginParm.type==='email'?'checked':'unchecked'" @click="loginParm.type='email'">验证码登录</span>
            <el-divider direction="vertical" />
            <span :class="loginParm.type==='password'?'checked':'unchecked'" @click="loginParm.type='password';">密码登录</span>
        </div>

        <div style="margin-top: 30px;">
            <div >
                <input v-if="loginParm.type==='email'" maxlength="30" v-model="loginParm.email" class="input" type="text" placeholder="请输入邮箱">
                <input v-else v-model="loginParm.userName" maxlength="20" class="input" type="text" placeholder="请输入账号">
            </div>

            <div style="margin-top: 20px;">
                <div class="input-container">
                    <input v-if="loginParm.type==='email'" maxlength="6" v-model="loginParm.code" class="input" type="text" placeholder="请输入验证码">
                    <input v-else v-model="loginParm.password" maxlength="20" class="input" type="text" placeholder="请输入密码">
                    <span @click="getCode()" :disabled="time>0" v-if="loginParm.type==='email'" class="code-button">{{time>0?`${time}s`:'获取验证码'}}</span>
                </div>
            </div>
        </div>

        <div style="margin-top: 100px;">
            <el-button  :disabled="rule()" class="button" @click="doLogin()">{{loginParm.type==='email'?'登录/注册':'登录'}}</el-button>
        </div>

        <div class="douyang-login" @click="handleDouyangLogin">
            <img src="@/assets/1.png" alt="抖阳" class="douyang-logo">
            <span>抖阳登录</span>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import LoginParm from '@/types/user/LoginParm'
    import request from '@/base/request';
    import { ElMessage } from 'element-plus'



    const time=ref(0)
    let timer=null

    const loginParm =ref<LoginParm>({
        type:'email',
        userName:"",
        password:"",
        email:"",
        code:""
    })

    const rule=()=>{
        if(loginParm.value.type==='email'){
            return (loginParm.value.email=="" || (loginParm.value.code?.length ?? 0) != 4)
        }else{
            return (loginParm.value.userName=="" || (loginParm.value.password?.length ?? 0) <=0)
        }
    }
    const doLogin=async ()=>{
        if(rule())return;
        const response=(await request.post("/user/userBaseInfo/doLogin",loginParm.value)).data
        if(response.code==200){
            ElMessage.success("登录成功")
            localStorage.removeItem('message')
            localStorage.setItem('token',response.data)
            window.location.reload()
        }else{
            ElMessage.error(response.msg)
        }
    }

    // 处理抖阳登录
    const handleDouyangLogin = () => {
        const baseUrl = window.location.origin
        const redirectUrl = `${baseUrl}/auth/oauth2/login`
        window.open(`/auth/login?backUrl=${window.location.href}&redirect=${redirectUrl}`, '_blank')
    }

    // 获取验证码
    const getCode = async() => {
        const response=(await request.get("/user/userBaseInfo/getCode",{params:{email:loginParm.value.email}})).data
        if(response.code==200){
            ElMessage.success("已经发送验证码")
            time.value=60
            clearInterval(timer)
            timer=setInterval(()=>{
                time.value--
                if(time.value<=0){
                    clearInterval(timer)
                }
            },1000)
        }else{
            ElMessage.error(response.msg)
        }
    }
</script>


<style scoped>

    .input-container {
        position: relative;
        width: 240px;
    }

    .code-button {
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        color: rgb(233, 37, 44);
        cursor: pointer;
        font-size: 14px;
    }

    .code-button:hover {
        color: rgb(146, 15, 19);
    }

    .code-button:active {
        color: rgb(97, 10, 11);
    }

    .button{
        width: 260px;
        height: 50px;
        border-radius: 15px;
        border: 0cm;
        background-color: rgb(231, 59, 59);
        color: white;
        font-size: 17px;
    }

    .button:disabled{
        opacity: 0.5;
        color: azure;
    }
    .button:disabled:hover{
        background-color: rgb(231, 59, 59);
        opacity: 0.5;
    }


    .input{
        background-color: rgb(240, 240, 240);
        width: 240px;
        height: 50px;
        border-radius: 15px;
        border: 1px solid rgb(240, 240, 240); /* 添加默认边框 */
        color: black;
        padding-left: 20px;
    }

    .input:focus {
        outline: none; /* 移除默认的聚焦轮廓 */
        border-color: rgb(240, 240, 240);/* 保持边框颜色不变 */
    }

    .left{
        width: 368px;
        height: 50vh;
        float: left;
        border-right: 0.1px solid rgb(205, 205, 205);
    }

    .right{
        margin-left: 58%;
    }

    .checked{
        font-size: 17px;
        color: black;
        cursor: pointer;
    }

    .unchecked{
        color: rgb(205, 205, 205);
        font-size: 17px;
        
    }

    .unchecked:hover{
        color: rgb(0, 0, 0);
        cursor: pointer;
    }

    .douyang-login {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 260px;
        height: 100px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .douyang-login:hover {
        transform: translateY(-5px);
    }

    .douyang-logo {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .douyang-login span {
        color: #333;
        font-size: 16px;
    }

</style>